<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>诺皓意式餐厅</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
		<style type="text/css">
			.toTop {
				position: fixed;
				right: 5px;
				bottom: 20px;
				background-image: url(images/gotop.png);
				width: 50px;
				height: 50px;
				cursor: pointer;
				/* 鼠标放上去,变成只手 */
				display: none;
			}

			.mtb-30 {
				margin: 100px 0 30px 0;
			}

			.introduce-1 {
				background-color: #f6f6f6;
				padding: 3.75rem;
			}

			@media (min-width:992px) {
				.menuTB {
					width: 70%;
				}
			}

			.menuTB th,
			.menuTB td {
				vertical-align: middle;
			}

			.menuTB tr {
				/* 文字不换行 */
				white-space: nowrap;
			}

			.progress {
				position: fixed;
				top: 50%;
				left: 50%;
				width: 500px;
				margin-left: -250px;
			}

			#navbarspy {
				/* background-color: rgba(255, 255, 255, 0.6); */
				background-color: #0b2626;
			}

			#navbarspy>button {
				background-color: #459c8d;
			}

			#navbarspy a {
				color: #fff;
			}

			@media(max-width) {
				#navbarspy a .nav-link {
					background-color: transparent;
				}
			}

			.banner-block {
				position: absolute;
				top: 40%;
				left: -40%;
			}

			.banner-block h5 {
				font-size: 5rem;
			}

			#about {
				color: #c2c2c2;
			}

			.lead {
				color: #858585;
				margin-top: 80px;
			}

			.food-bg {
				background-image: url(images/about/food-bg.png);
				background-repeat: no-repeat;
			}

			.dark .row {
				height: 300px;
			}

			.dark {
				background-color: #d1d1d1;
				/* height: 100px; */
				width: 100%;
				color: #fff;
			}

			.block-title {
				color: #006A73;
				padding: 10px;
				font-weight: 300;
				position: absolute;
				top: 20%;
				left: 10%;
				font-size: 24px;
				background-color: rgba(255, 255, 255, 0.4);
			}

			.menu-bg {
				padding: 100px 0;
				background-color: #f4f4f4;
			}

			.list-bg {
				background-color: #f9f9f9;
				padding: 100px;
			}

			.list-content-bg {
				background-color: #ebebeb;
				padding: 100px;
			}

			.mb-35 {
				margin-bottom: 35px;
			}

			.mt-10 {
				margin-top: 10px;
			}

			.contact-form {
				background-color: #fafafa;
				padding: 50px;
			}

			@media (max-width:575px) {
				.contact-form .form-control-lg {
					font-size: 1rem;
				}
			}

			.page-footer {
				background-color: #b0b0b0;
				color: #fff;
				padding: 30px;
			}
		</style>
	</head>
	<body id="home" data-spy="scroll" data-target="#navbarspy" data-offset=100 style="position: relative;">
		<!-- 进度条开始 -->
		<div class="progress">
			<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75"
				aria-valuemin="0" aria-valuemax="100" style="width: 90%"></div>
		</div>
		<!-- 进度条结束 -->
		<div class="content" style="display: none;">
			<!--  导航栏开始 -->
			<nav id="navbarspy" class="navbar navbar-expand-lg navbar-light sticky-top nav-pills">
				<a class="navbar-brand" href="#">
					<img src="images/logo.png" class="img-fluid">
				</a>
				<!-- 汉堡结构 -->
				<button class="navbar-toggler" type="button" data-toggle="collapse"
					data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
					aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div class="collapse navbar-collapse" id="navbarSupportedContent">
					<ul class="navbar-nav ml-auto text-center">
						<li class="nav-item active">
							<a class="nav-link" href="#home">首页 <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#about">关于诺皓</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#introduce">环境简介</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#menu">菜单介绍</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#chef">主厨介绍</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#contact">联络我们</a>
						</li>
					</ul>
				</div>
			</nav>
			<!-- 导航栏结束 -->
			<!-- 轮播图开始 -->
			<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel" data-interval=3000>
				<!-- 指示器 -->
				<ol class="carousel-indicators">
					<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
					<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
					<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
				</ol>
				<!-- 轮播内容 -->
				<div class="carousel-inner">
					<div class="carousel-item active">
						<img src="images/banner/banner-1.jpg" class="d-block w-100 img-fluid" alt="...">
						<div class="carousel-caption d-none d-md-block banner-block">
							<h5>美味餐点</h5>
							<p>家人、朋友分享的美食飨宴</p>
						</div>
					</div>
					<div class="carousel-item">
						<img src="images/banner/banner-2.jpg" class="d-block w-100 img-fluid" alt="...">
						<div class="carousel-caption d-none d-md-block banner-block">
							<h5>轻松环境</h5>
							<p>吃饭就是要让自己放松享受</p>
						</div>
					</div>
					<div class="carousel-item">
						<img src="images/banner/banner-3.jpg" class="d-block w-100 img-fluid" alt="...">
						<div class="carousel-caption d-none d-md-block banner-block">
							<h5>悠闲气氛</h5>
							<p>让你舍不得回家的愉悦心情</p>
						</div>
					</div>
				</div>
				<!-- 控制器 -->
				<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
			<!-- 轮播图结束 -->
			<div class="container-fluid">
				<!-- 标题开始 -->
				<div id="about" class="jumbotron jumbotron-fluid" style="margin-bottom: 0rem;">
					<div class="container">
						<h1 class="display-3">幸福美味的定义</h1>
						<p class="lead">幸福在不同的人身上拥有着不同的定义，或许是生活的安逸富足，或许是精神上的安慰与喜悦，或许是一丝细微的温暖，
							或许是一种自由奔放的洒脱。在我看来，幸福是一种静静的聆听，一种佛过心灵的清风。</p>
					</div>
				</div>
				<!-- 标题结束 -->
				<!-- 图片开始 -->
				<div class="row no-gutters food-bg">
					<!-- align-self-end列垂直方向上的下端对齐 -->
					<div class="col-sm-6 align-self-end">
						<img src="images/food-1.jpg" class="img-fluid">
					</div>
					<div class="col-sm-6">
						<div class="row no-gutters">
							<div class="col col-sm-6">
								<img src="images/about/food-2.png" class="img-fluid">
							</div>
							<div class="col col-sm-6">
								<img src="images/food-3.jpg" class="img-fluid">
							</div>
							<div class="row no-gutters">
								<div class="col">
									<img src="images/food-4.jpg" class="img-fluid">
								</div>
							</div>
						</div>
					</div>
					<div class="col-sm-12">
						<!-- 引用开始 -->
						<div class="row align-items-center dark no-gutters" style="height: 300px;">
							<div class="col">
								<blockquote class="blockquote text-center">
									<p class="mb-0">只要告诉我你爱吃什么，我就能知道你是什么样的人。</p>
									<footer class="blockquote-footer">——萨瓦林<cite title="Source Title">Jean
											Authelme</cite></footer>
								</blockquote>
							</div>
						</div>
						<!-- 引用结束 -->
					</div>
				</div>
				<!-- 			背景图片自适应
				background:url(图片地址) no-repeat center fixed;
				background-size:contain; -->
				<div class="row no-gutters" style="background-image: url(images/introduce-bg1.jpg);">
					<!-- offset-4向右偏移4格 -->
					<div class="col-4 offset-4">
						<img src="images/introduce-1.jpg" class="img-fluid">
					</div>
					<!-- d-none d-md-block中屏及以上显示 -->
					<div class="col-4  d-none d-md-block"><span class="block-title">好好放纵您的味觉</span></div>
				</div>
				<!-- 图片结束-->
				<!-- 环境介绍开始 -->
				<div id="introduce" class="row">
					<div class="col text-center mtb-30">
						<img src="images/introduce-title1.jpg" class="img-fluid">
					</div>
				</div>
				<div class="introduce-1">
					<div class="row no-gutters align-items-center">
						<div class="col-12 col-md-6 col-lg-3">
							<pre><img src="./images/introduce-2.jpg" class="img-fluid img-thumbnail"></pre>
						</div>
						<div class="col-12 col-md-6 col-lg-3">精湛厨艺，一味入魂，食的艺术</div>
						<div class="col-12 col-md-6 col-lg-3">
							<img src="./images/introduce-3.jpg" class="img-fluid img-thumbnail">
						</div>
						<div class="col-12 col-md-6 col-lg-3">动物友善，欢迎毛小孩与其他宠物</div>
						<div class="col-12 col-md-6 col-lg-3">
							<img src="./images/introduce-4.jpg" class="img-fluid img-thumbnail">
						</div>
						<div class="col-12 col-md-6 col-lg-3">健康取向，好的食材、合理的价格</div>
						<div class="col-12 col-md-6 col-lg-3">
							<img src="./images/introduce-5.jpg" class="img-fluid img-thumbnail">
						</div>
						<div class="col-12 col-md-6 col-lg-3">主厨当家，美味把握，道道精彩</div>
					</div>
				</div>
				<!-- 环境介绍结束 -->
				<!-- 菜单介绍开始 -->
				<div id="menu" class="row">
					<div class="col text-center mtb-30">
						<img src="images/introduce-title2.jpg" class="img-fluid">
					</div>
				</div>
				<div class="row menu-bg">
					<div class="table-responsive">
						<!-- table-responsive图片响应式，有滚动条 -->
						<table class="table table-dark table-striped table-hover table-bordered  menuTB mx-auto">
							<thead>
								<tr>
									<th scope="col" class="text-center">意大利面</th>
									<th scope="col">品名</th>
									<th scope="col">价格</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<!-- rounded图片圆角 （mx-auto居中 d-block块状）--图片居中必要 -->
									<td><img src="images/menu-1.jpg" class="img-fluid mx-auto d-block"></td>
									<td>清炒海鲜意大利面</td>
									<td>290元</td>
								</tr>
								<tr>
									<td><img src="images/menu-2.jpg" class="img-fluid mx-auto d-block"></td>
									<td>咖哩意大利宽面</td>
									<td>290元</td>
								</tr>
								<tr>
									<td><img src="images/menu-3.jpg" class="img-fluid mx-auto d-block"></td>
									<td>青酱意大利蝴蝶面</td>
									<td>290元</td>
								</tr>
								<tr>
									<td><img src="images/menu-4.jpg" class="img-fluid mx-auto d-block"></td>
									<td>清炒海鲜意蝴蝶面</td>
									<td>290元</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
				<!-- 菜单介绍结束 -->
				<!-- 餐厅坚持开始 -->
				<div class="row">
					<div class="col text-center mtb-30">
						<img src="images/introduce-title5.jpg" class="img-fluid">
					</div>
				</div>
				<!-- lg及xl显示这个 -->
				<div class="row ">
					<div class="col-4 list-bg d-none d-lg-block">
						<div class="list-group" id="list-tab" role="tablist">
							<a class="list-group-item list-group-item-action active" id="list-home-list"
								data-toggle="list" href="#list-home" role="tab" aria-controls="home">严选食材</a>
							<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list"
								href="#list-profile" role="tab" aria-controls="profile">坚持手作</a>
							<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list"
								href="#list-messages" role="tab" aria-controls="messages">幸福体验</a>
							<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list"
								href="#list-settings" role="tab" aria-controls="settings">忠于原味</a>
						</div>
					</div>
					<div class="col-8 list-content-bg d-none d-lg-block">
						<div class="tab-content" id="nav-tabContent">
							<div class="tab-pane fade show active" id="list-home" role="tabpanel"
								aria-labelledby="list-home-list">
								每项食材，皆采取每日限量的方式，所享用的不仅是当天现切直送的新鲜食材，并且维持一致的高水平。除了当季食材最鲜美之外，也是食材本身营养价值最高的时期。
								所以说食物吃对季节，对身体自然也最好。 不过当季食材再美味，如果吃得不安心也没意义。 所以「既对身体健康又能安心食用的鲜美食材」，才是我们眼中的逸品。
							</div>
							<div class="tab-pane fade" id="list-profile" role="tabpanel"
								aria-labelledby="list-profile-list">
								所有料理发想，都是以天然原味为本，运用天然界不同食材特性，手作出一道道美味料理。这是纯天然最有趣的挑战，也是最大的变量，每道料理都是独一无二的存在，无法100%复制。
							</div>
							<div class="tab-pane fade" id="list-messages" role="tabpanel"
								aria-labelledby="list-messages-list">
								诺皓的料理就跟环境一样，没有炫目的噱头，却很温和，很扎实，带小巧思的料理布置，让人觉得充满温度。晕黄的光线透出温馨的家庭气息，用餐空间感觉得出历史和复古风情，不新颖，却温暖而放松，很适合跟家人朋友一起来放松。
							</div>
							<div class="tab-pane fade" id="list-settings" role="tabpanel"
								aria-labelledby="list-settings-list">
								坚持不使用味精，纯粹只以海盐、胡椒来调味，并擅用食材味道特性，做出一道道自然风味的美味料理，更是坚持不加色素、香料、香精、防腐剂，而且当天现做现卖不放隔夜，完全纯手工制作，这就是诺浩给您的印象。
							</div>
						</div>
					</div>
				</div>
				<!-- md及以下显示这个 -->
				<div class="row no-gutters d-block d-lg-none">
					<div class="list-group">
						<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
							<div class="d-flex w-100 justify-content-between">
								<h5 class="mb-1">严选食材</h5>
							</div>
							<p class="mb-1">每项食材，皆采取每日限量的方式，所享用的不仅是当天现切直送的新鲜食材，并且维持一致的高水平。
							</p>
						</a>
						<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
							<div class="d-flex w-100 justify-content-between">
								<h5 class="mb-1">坚持手作</h5>
							</div>
							<p class="mb-1">所有料理发想，都是以天然原味为本，运用天然界不同食材特性，手作出一道道美味料理。</p>
						</a>
						<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
							<div class="d-flex w-100 justify-content-between">
								<h5 class="mb-1">幸福体验</h5>
							</div>
							<p class="mb-1">诺皓的料理就跟环境一样，没有炫目的噱头，却很温和，很扎实，带小巧思的料理布置，让人觉得充满温度。</p>
						</a>
						<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
							<div class="d-flex w-100 justify-content-between">
								<h5 class="mb-1">忠于原味</h5>
							</div>
							<p class="mb-1">坚持不使用味精，纯粹只以海盐、胡椒来调味，并擅用食材味道特性，做出一道道自然风味的美味料理。</p>
						</a>
					</div>
				</div>
				<!-- 餐厅坚持结束 -->
				<!-- 主厨介绍开始 -->
				<div id="chef" class="row">
					<div class="col text-center mtb-30">
						<img src="images/introduce-title3.jpg" class="img-fluid">
					</div>
				</div>
				<div class="row w-75 mx-auto">
					<div class="col-sm-12 col-md-4 mb-35">
						<figure class="figure">
							<img src="images/chef-1.jpg" class="figure-img img-fluid" alt="...">
							<figcaption class="figure-caption text-center mt-10">行政主廚 - JOSH CLARK</figcaption>
						</figure>
					</div>
					<div class="col-sm-12 col-md-4 mb-35">
						<figure class="figure">
							<img src="images/chef-2.jpg" class="figure-img img-fluid" alt="...">
							<figcaption class="figure-caption text-center mt-10">第一主廚 - JOHN DOE</figcaption>
						</figure>
					</div>
					<div class="col-sm-12 col-md-4">
						<figure class="figure">
							<img src="images/chef-3.jpg" class="figure-img img-fluid" alt="...">
							<figcaption class="figure-caption text-center mt-10">首席主廚 - MARY JANE</figcaption>
						</figure>
					</div>
				</div>
				<!-- 主厨介绍结束 -->
				<!-- 联络我们开始 -->
				<div id="contact" class="row">
					<div class="col text-center mtb-30">
						<img src="images/introduce-title4.jpg" class="img-fluid">
					</div>
				</div>
				<form class="needs-validation contact-form" novalidate>
					<div class="container">
						<div class="form-row">
							<div class="form-group col-md-6">
								<label for="inputEmail4" class="sr-only">Name</label>
								<input type="email" class="form-control form-control-lg" id="inputEmail4"
									placeholder="请输入您的姓名" required>
								<div class="valid-feedback">
									姓名必填
								</div>
							</div>
							<div class="form-group col-md-6">
								<label for="inputPassword4" class="sr-only">phone</label>
								<input type="password" class="form-control form-control-lg" id="inputPassword4"
									placeholder="请输入您的电话">
							</div>
						</div>
						<div class="form-group">
							<label for="inputAddress" class="sr-only">Email</label>
							<input type="text" class="form-control form-control-lg" id="inputAddress"
								placeholder="请输入您的Email" required>
							<div class="valid-feedback">
								邮件必填
							</div>
						</div>
						<div class="form-row">
							<div class="form-group col">
								<label for="inputState" class="sr-only">State</label>
								<select id="inputState" class="form-control form-control-lg">
									<option selected>请选择</option>
									<option>餐点</option>
									<option>服务</option>
									<option>环境</option>
									<option>价格</option>
								</select>
							</div>
						</div>
						<div class="form-group">
							<label for="exampleFormControlTextarea1" class="sr-only">请输入询问内容</label>
							<textarea class="form-control form-control-lg" id="exampleFormControlTextarea1" rows="3"
								placeholder="请输入询问内容" required></textarea>
							<div class="valid-feedback">
								咨询内容必填
							</div>
						</div>
						<div class="row justify-content-center">
							<button type="submit" class="btn btn-primary btn-lg" style="width: 50%;">发送</button>
						</div>
					</div>
				</form>
				<!-- 联络我们结束 -->
				<footer class="page-footer">
					<div class="row">
						<div class="col text-center">
							Copyright © 互联网出版许可证编号新出网证(京)字xxx号 | 出版物经营许可证 | 网络文化经营许可证京网文[2022]xxxx-xxxx号
						</div>
					</div>
				</footer>
			</div>

		</div>
		<!-- 滚动到顶部开始 -->
		<div class="toTop">

		</div>
		<!-- 滚动到顶部结束 -->
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.bundle.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			(function() {
				'use strict';
				window.addEventListener('load', function() {
					// Fetch all the forms we want to apply custom Bootstrap validation styles to
					var forms = document.getElementsByClassName('needs-validation');
					// Loop over them and prevent submission
					var validation = Array.prototype.filter.call(forms, function(form) {
						form.addEventListener('submit', function(event) {
							if (form.checkValidity() === false) {
								event.preventDefault();
								event.stopPropagation();
							}
							form.classList.add('was-validated');
						}, false);
					});
				}, false);
				// 页面加载完成进度条淡出,页面内容淡入
				$('.progress').fadeOut(2000, function() {
					$('.content').fadeIn(1000);
				})
				// 页面滚动到相应区域,背景颜色改变
				$(document).scroll(function() {
					// 当滚动到最顶端时,箭头隐藏,当箭头向下滚动时,箭头淡入
					if ($(this).scrollTop()) {
						$('.toTop').fadeIn();
					} else {
						// 当滚动到最顶端时,箭头淡出
						$('.toTop').fadeOut();
					}
					//开始卷动
					if ($(this).scrollTop() > ($("#about").offset().top) - 73) { //如果视窗的卷动到了#about区块的上方

						$("#navbarspy").css('transition', 'background 0.5s linear'); //背景颜色淡入
						$("#navbarspy").css('background-color', 'rgba(70, 70, 70, 0.6)');
					} else { //如果视窗的卷动没有到了#about区块的上方
						$("#navbarspy").css('background-color', '#0b2626;');

					}
				});
				//选单点选滑动效果
				$("#navbarspy navbar-nav li a[href^='#']").on('click', function(e) {

					// hash是设定连结#字后面的文字内容
					var target;
					target = this.hash;

					// 连结效果取消
					e.preventDefault();

					// 将导航栏的高度储存在navOffset变量里
					var navOffset;
					navOffset = $('#navspy').height();

					// 卷轴滑动开始
					$('html, body').animate({
						scrollTop: $(this.hash).offset().top - navOffset
					}, 600, function() {

						// 增加#字后面的文字内容到URL的最后面
						return window.history.pushState(null, null, target);

					});

				});
				// 单击箭头,回到页面顶部
				$('.toTop').on('click', function() {
					$('html,body').animate({
						scrollTop: 0
					}, 1000)
				})
			})();
		</script>
	</body>
</html>